<template>
    <section class="fuwu_list">
  		<p class="title_menu">
  			
  			<span class="title_all" id="titleAll">
  				<span class="title">服务资源目录</span>
  				<span class="menu_li" v-for="(item,index) in menuLi" :key="index" :class="{'active':activeItem===index}" @click="changeCurrent(index,item.id)">{{item.name}}</span>

  			</span>
  			<span class="title_lefe_right">
  				<i class="el-icon-caret-left diy_left_arrow" @click="leftRoaw"></i>
  				<i class="el-icon-caret-right diy_right_arrow" @click="rightRoaw"></i>
  				<!--<el-input class="search_input" placeholder="请输入内容" prefix-icon="el-icon-search"  v-model="form.search" > </el-input>-->

<el-autocomplete
class="search_input"
  popper-class="my-autocomplete"
  v-model="search"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect">
  <i
    class="el-icon-search"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="name" @click="clickItemId(item.id,item.name)">{{ item.name }}</div>
    <!--<span class="addr">{{ item.address }}</span>-->
  </template>
</el-autocomplete>

  			</span>
  			
  			<div class="content">
  				<div class="left" >
  					<left-tab :resetLeft="resetLeft" :businessId="businessId" @chooseService="chooseService"></left-tab>
  				</div>
  				<div class="right">
  					<!--<right-tab :ServicedetailId="ServicedetailId" :businessId="businessId"></right-tab>-->
  					<right-detail :detailData="detailData"></right-detail>
  				</div>
  			</div>
  		</p>
        
    </section>
</template>

<script>
    import leftTab from "./components/leftTab"
    import rightTab from "./components/rightTab"
    import rightDetail from "./components/rightDetail"
    import {
    	computedPostDictionarySearch,
    	computedPostDictionarySearchInfo,
    	computedPostServicedetail,
    	computedPostServiceSearch
    } from "./components/computedServerList"
    
    import {
    	componentGetDetail
    } from "@/views/serverResource/common/js_css_img/serverResourceComputed"
    
    import {
    	apiPostServerList
    } from "./components/apiServerList"
    export default { 
    	components:{
    		leftTab,
    		rightTab,
    		rightDetail
    	},
        data() {
          return {
          		resetLeft:false,
          		businessId:0,
          		activeItem:0,
          		ServicedetailId:0,
          		restaurants: [
          		],
          		search:"",
          		menuLi:[
          			
          		],
          		detailData:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'资源名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源标识',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源所在网段',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务方名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务类型',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'描述',
          						value:"",
          						type:'1'
          					},
          					
          				],
          			},
          			{
          				title:"资源信息",
          				lebelWidth:"150px",
          				elForm:[],
          			},
          			{
          				title:"通用策略",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'按频率控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'按流量控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问时间段',
          						value:"",
          						type:'1'
          					},
          				],
          			},
          			{
          				title:"发布信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'可发布区域',
          						value:[],
          						type:'3'
          					},
          				],
          			},
          			{
          				title:"其他",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'调用文档',
          						value:"dad",
          						type:'1'
          					},
          					
          				],
          			},
          		],
          		detailDataBackUp:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'资源名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源标识',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'资源所在网段',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务方名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'服务类型',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:[],
          						type:'3'
          					},
          					{
          						name:'描述',
          						value:"",
          						type:'1'
          					},
          					
          				],
          			},
          			{
          				title:"资源信息",
          				lebelWidth:"150px",
          				elForm:[],
          			},
          			{
          				title:"通用策略",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'按频率控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'按流量控制',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问时间段',
          						value:"",
          						type:'1'
          					},
          				],
          			},
          			{
          				title:"发布信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'可发布区域',
          						value:[],
          						type:'3'
          					},
          				],
          			},
          			{
          				title:"其他",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'调用文档',
          						value:"dad",
          						type:'1'
          					},
          					
          				],
          			},
          		],
          		jiekouDetailData:[/*接口表单的详情*/
          					{
          						name:'数据来源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'接口地址',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'接口协议',
          						value:"wdad",
          						type:'1'
          					},
          					{
          						name:'传输方法',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'传递方式',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'请求参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回数据',
          						value:[],
          						type:'2'
          					}
          		],
          		wenjianDetailData:[/*文件表单的详情*/
          					{
          						name:'数据来源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'FTP数据源',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'文件目录',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'文件名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'数据匹配',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回接口',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'返回文件地址',
          						value:"",
          						type:'1'
          					},
          		],
          };
        },
        methods: {
        		changeCurrent(val,id){/*改变当前页*/
        			this.activeItem = val;
        			this.businessId = id;
        			this.resetLeft = !this.resetLeft
        			console.log(val);
        		},
        		leftRoaw(){
        			document.getElementById("titleAll").scrollLeft = document.getElementById("titleAll").scrollLeft-50;
        		},
        		rightRoaw(){
        			document.getElementById("titleAll").scrollLeft = document.getElementById("titleAll").scrollLeft+50;
        		},
        		chooseService(id){/*选择这条服务，请求详情*/
//      			this.ServicedetailId = id;
        			componentGetDetail(this, {id:id});
        		},
        		querySearch(queryString, cb) {
        			console.log(queryString);
        				
				    apiPostServerList(
						'resource/service/search',{
							"name":queryString
						}
					).then((res)=>{
						this.restaurants = res.data.data.list;
						var results = queryString ? this.restaurants.filter(this.createFilter(queryString)) : this.restaurants;
						 cb(this.restaurants);
					})
        			
//			        var restaurants = this.restaurants;
			       
			        // 调用 	callback 返回建议列表的数据
			       
			      },
			    createFilter(queryString) {
			        return (restaurant) => {
			        	console.log(restaurant);
			          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			        };
			    },
			    handleSelect(item) {
			        console.log(item);
			    },
			    handleIconClick(ev) {
			        console.log(ev);
			    },
			    clickItemId(id,name){
//			    	alert(name);
			    	this.search = name;
			    	this.chooseService(id);
			    }
        },
        mounted(){
        	computedPostDictionarySearch(this);
//      	computedPostDictionarySearchInfo(this);
        },
        watch:{

        }
  };
</script>

<style>
	.diy_left_arrow{
	    position: absolute;
	    font-size: 40px;
	    color: #fff;
	    cursor: pointer;
	    top: -73px;
	    left: -40px;
	}
	.diy_right_arrow{
		        position: absolute;
			    font-size: 40px;
			    color: #fff;
			    cursor: pointer;
			    top: -73px;
			    right: -40px;
	}
	.fuwu_list{
		background: #F7F7F7;
		overflow-y: scroll;
		height: 100%;
	}
	.left{
		width: 230px;
		float: left;
		/*overflow-y: scroll;*/
		/*height: 1800px;*/
	}
	
	.right{
		width: 830px;
		margin-left: 250px;
		/*height: 1800px;*/
		background: #FFF;
		padding: 10px;
		    overflow-y: scroll;
	}
	.content{
		width: 1080px;
		margin: 10px auto 0 auto;
		/*height: 1800px;*/
	}
    .fuwu_list .title_menu{
    	height: 65px;
    	background: #409dfc;
    	line-height: 65px;
    	overflow: hidden;
    	position: relative;
    }
    .fuwu_list .title_lefe_right{
    	  width: 1080px;
	   	 margin: 0 auto;
	   	 position: relative;
	   	 height: 84px;
	   	 display: block;
    }
   .fuwu_list .title_all {
	    width: 1080px;
	    margin: 0 auto;
	    display: block;
	    color: white;
	    font-size: 16px;
	    cursor: pointer;
	    overflow-x: inherit;
	    height: 84px;
	    overflow-x: auto;
	    white-space: nowrap;
	    border-right: solid 180px #409dfc;
	    position: relative;
	}
    .fuwu_list .title{
    	font-size: 20px;
    }
    .fuwu_list .menu_li{
    	margin: 0 30px;
    	
    }
    .fuwu_list .menu_li.active{
    	background: #fff;
    	padding: 4px 7px;
    	border-radius: 20px;
    	color: #409dfc;
    }
    .fuwu_list .search_input{
    	width: 180px;
	    position: absolute;
	    top: -85px;
	    right: 0px;
    }
    .fuwu_list .search_input .el-input__inner{
    	    background-color: #fff0;
    	    border: 1px solid #fff;
    }
    .fuwu_list .search_input  .el-icon-search:before{
    	color: #fff;
    }
    .fuwu_list .search_input ::-webkit-input-placeholder{
    	color: #fff;
    }
</style>